<template>
  <div>
    <div class="box1">
      <img src="../assets/close1.png" />
      <img src="../assets/close2.png" />
      <img src="../assets/close3.png" />
    </div>
    <div class="box2">
      <div class="box2_1">
        <img
          src="../assets/ias_676d25c2410ba290e334b74f0039e394_148x148_90.png"
          height="76"
          width="76"
        />
        <img
          src="../assets/ias_6939db4b618f990f0deab772b3982e4d_152x152_90.png"
          height="76"
          width="76"
        />
        <img src="../assets/primary_96x48_90.png" height="24" width="48" />
        <img src="../assets/primary_96x48_90 (1).png" height="24" width="48" />
      </div>
      <div class="box2_2">
        <img
          src="../assets/ias_b3d05600105d68e73938bd951ff463d2_152x152_90.png"
          height="76"
          width="76"
        />
        <img
          src="../assets/ias_e6c7fb318d538cd59d5a72b93643429a_148x148_90.png"
          height="76"
          width="76"
        />
        <img
          src="../assets/1649816502812_152x52_90.png"
          width="76"
          height="26"
        />
        <img
          src="../assets/1649816502812_152x52_90.png"
          width="76"
          height="26"
        />
      </div>
    </div>
    <span class="p1">$243</span>
    <span class="p2">$443</span>
    <div class="box3">
      <div>
        <img src="../assets/box31.png" width="186" height="93" /><img
          src="../assets/b31.png"
          height="67"
          width="67"
          class="p3"
        />
      </div>
      <div>
        <img src="../assets/box32.png" width="186" height="93" /><img
          src="../assets/b32.jpg"
          height="67"
          width="67"
          class="p4"
        />
      </div>
    </div>
  
	<div class="box4">
      <div>
        <img src="../assets/1.png" height="82" width="82" />
        <span class="pri">精选好物</span>
        <br />
        <span>￥295</span>
      </div>
      <div>
        <img src="../assets/2.jpg" height="70" width="70" class="sp" />
		<br>
        <span  class="pri">超值爆款</span>
        <br />
        <span>￥249</span>
      </div>
      <div>
        <img src="../assets/3.png" height="82" width="82" />
        <span  class="pri">人气热卖</span>
        <br />
        <span>￥460</span>
      </div>
      <div>
        <img src="../assets/4.png" height="82" width="82" />
        <span  class="pri">领￥155券</span>
        <br />
        <span>￥614</span>
      </div>
    </div>
	<div class="box5">
		<img src="../assets/center.png" alt="">
	</div>
	<showimg shopid="1" text="APPLE" :path="'../assets/iPhone/iphone.jpg'" ></showimg>
	<showimg shopid="2" text="COLOR MIKIBANA" :path="'../assets/girl.jpg'"></showimg>
	<showimg shopid="3" text="李宁" :path="'../assets/lining.jpg'"></showimg>
	<showimg shopid="4" text="阿迪达斯" :path="'../assets/adidas.jpg'"></showimg>
	<showimg shopid="5" text="土拨鼠" :path="'../assets/mounce.jpg'"></showimg>
  </div>
</template>

<script>
	import showimg from './showimg.vue'
	export default {
		components:{
			showimg
		}
	}
</script>

<style scoped="scoped">
	.box5 img {
		width: 100%;
		height: 63px;
	}
.p1 {
  position: relative;
  left: 215px;
  top: -25px;
  font-size: 13px;
  color: white;
}
.p2 {
  position: relative;
  left: 270px;
  top: -25px;
  font-size: 13px;
  color: white;
}
.box1 {
  width: 100%;
  height: 219px;
  background-color: red;
  background: url(../assets/bgc1.png) no-repeat center center;
  background-size: 100%;

  display: flex;
  justify-content: space-around;
}
.box1 img {
  width: 114px;
  height: 137px;
  margin-top: 70px;
}
.box2 {
  width: 100%;
  height: 137px;
  display: flex;
  justify-content: space-evenly;
}
.box2 div {
  flex: 1;
  /* border: 1px solid black; */
}
.box2_1 {
  background: url("../assets/box2_1.png") no-repeat center center;
  background-size: 100%;
  display: flex;
  justify-content: space-evenly;
  align-content: flex-end;
  flex-wrap: wrap;
}
.box2_2 {
  background: url("../assets/box2-2.png") no-repeat center center;
  background-size: 100%;
  display: flex;
  justify-content: space-evenly;
  align-content: flex-end;
  flex-wrap: wrap;
}
.box3 {
  width: 100%;
  height: 93px;
  display: flex;
}
.box3 div {
  flex: 1;
}
.p3 {
  position: relative;
  top: -80px;
  left: 110px;
}
.p4 {
  position: relative;
  top: -85px;
  left: 103px;
}
.box4 {
  width: 100%;
  height: 164px;
  background: url("../assets/box4.png") no-repeat center center;
  background-size: 100%;
  display: flex;
  justify-content: space-evenly;
}
.box4 div {
  font-size: 12px;
  text-align: center;
  flex: 1;
  margin-top: 30px;

}
.sp{
	margin-top: 13px;
}
.pri{
	color: #f7286e;
}
</style>
